<template>
  <!-- 分类 -->
  <div class="classifyBox">
    <x-header :left-options="{showBack: true,backText:'分类'}" class="headerBox"></x-header>
    <!-- 顶部背景 -->
    <div class="topbg">
      <img src="../assets/images/bg01.png" />
    </div>
    <!-- tab导航 -->
    <div class="navTabList">
      <tab :line-width="2" active-color="#fff" v-model="tabIndex">
        <tab-item
          class="vux-center"
          v-for="(item, index) in listContent"
          :key="index"
        >{{item.title}}</tab-item>
      </tab>
      <img src="../assets/images/classify01.png" class="tabFilterImg" />
    </div>
    <!-- 搜索功能 -->
    <div class="searchBox">
      <div class="search">
        <input placeholder="语文高分作文" placeholder-style="color:#fff;" />
        <img src="../assets/images/search01.png" mode="aspectFit" />
      </div>
      <button class="searchBtn">搜索</button>
    </div>
    <swiper :list="goodsImgList" :auto="true" :interval="3000" class="bannerBox"></swiper>
    <!-- 学习等级标签展示 -->
    <div class="rankBox clearfix">
      <template v-if="index<7&&!tagShow" v-for="(item,index) in rankTag">
        <div class="rankTag" :key="index">{{item}}</div>
      </template>
      <template v-if="tagShow" v-for="(item,index) in rankTag">
        <div class="rankTag" :key="index">{{item}}</div>
      </template>
      <div class="rankTag rankTag-btn" @click="tagShow=!tagShow">
        <img v-if="!tagShow" src="../assets/images/up01.png" alt />
        <img v-if="tagShow" src="../assets/images/down03.png" alt />
      </div>
    </div>

    <!-- 课程列表 -->
    <div class="couListBox">
      <div class="couList-nav">课程列表</div>
      <swiper
        v-model="tabIndex"
        :show-dots="false"
        ref="cateSwiper"
        :min-moving-distance="100"
        @on-get-height="getPageHeight"
      >
        <swiper-item v-for="(val, num) in listContent" :key="num">
          <div v-for="(item,index) in val.hotCourseList" class="listBox">
            <img :src="item.courseImg" />
            <div class="listRightBox">
              <div class="listRight-top">{{item.title}}</div>
              <div class="listRight-center">{{item.classHour}}课时 | {{item.studyNum}}人学过</div>
              <div class="listRight-down">
                ￥{{item.price_now}}
                <span class="text1">{{item.price_before}}</span>
                <span class="text2">{{item.hotCourseInfo_tips}}</span>
              </div>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
import { XHeader, Tab, TabItem, Swiper, Search, SwiperItem, } from "vux";
export default {
  components: {
    XHeader,
    Tab,
    TabItem,
    Swiper,
    Search,
    SwiperItem,
  },
  data() {
    return {
      tagShow: false,
      tabIndex: 0,
      goodsImgList: [
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
        },
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
        },
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg', // 404
        }
      ],
      listContent: [
        {
          title: '全部',
          hotCourseList: [
            {
              courseImg: require("../assets/images/course01.png"),
              title: "英语零基础直达大学四级（升级版）",
              classHour: "36",
              studyNum: "1210",
              price_now: "399",
              price_before: "￥499",
              hotCourseInfo_tips: "(会员免费)"
            },
            {
              courseImg: require("../assets/images/course01.png"),
              title: "英语零基础直达大学四级（升级版）",
              classHour: "36",
              studyNum: "1210",
              price_now: "399",
              price_before: "￥499",
              hotCourseInfo_tips: "(会员免费)"
            },
          ]
        },
        {
          title: '数学',
          hotCourseList: [
            {
              courseImg: require("../assets/images/course01.png"),
              title: "英语零基础直达大学四级（升级版）",
              classHour: "36",
              studyNum: "1210",
              price_now: "399",
              price_before: "￥499",
              hotCourseInfo_tips: "(会员免费)"
            },

          ]
        },
        {
          title: '英语',
          hotCourseList: [
            {
              courseImg: require("../assets/images/course01.png"),
              title: "英语零基础直达大学四级（升级版）",
              classHour: "36",
              studyNum: "1210",
              price_now: "399",
              price_before: "￥499",
              hotCourseInfo_tips: "(会员免费)"
            },
            {
              courseImg: require("../assets/images/course01.png"),
              title: "英语零基础直达大学四级（升级版）",
              classHour: "36",
              studyNum: "1210",
              price_now: "399",
              price_before: "￥499",
              hotCourseInfo_tips: "(会员免费)"
            },
          ]
        },
        {
          title: '物理',
        },
        {
          title: '化学',
        },
        {
          title: '生物',
        },
      ],
      rankTag: ['小学英语', '高中英语', '英语四级', '英语六级', '英语八级', '英语听力', '英语演讲', '显示测试', '显示测试', '显示测试', '显示测试',]
    }
  },
  methods: {
    getPageHeight() {
      let topHeight = document.getElementsByClassName('vux-slider')[0].offsetTop,
        diffHeight = window.screen.height - 40;
      this.$nextTick(() => {
        this.$refs.cateSwiper.xheight = diffHeight + 'px'
      })
      // console.log(topHeight, diffHeight, this.$refs.cateSwiper.xheight)
    },
  }
}
</script>

<style lang="less" scoped>
.classifyBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }
  /* 顶部背景 */
  .topbg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #fff;
    height: 500px;
    img {
      width: 100%;
      height: 490px;
    }
  }
  .navTabList {
    position: relative;
    /deep/.vux-tab-container {
      padding-right: 80px;
      .vux-tab {
        background-color: transparent;
      }
      .vux-tab-item {
        background-size: 100% 0px;
        background-color: transparent;
        color: #d8d8d8;
      }
    }
    .tabFilterImg {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      bottom: 0;
      right: 0;
      padding: 10px 25px;
      width: 40px;
      height: 40px;
    }
  }
  /* 搜索功能 */

  .searchBox {
    display: flex;
    align-items: center;
    padding: 0 26px;
    margin-top: 20px;
    .search {
      flex-grow: 1;
      display: flex;
      align-content: center;
      margin-right: 30px;
      position: relative;
    }

    .search input {
      border: none;
      outline: none;
      font-size: 30px;
      background: rgba(198, 225, 248, 0.8);
      width: 100%;
      height: 60px;
      color: #fff;
      border-radius: 40px;
      padding-left: 100px;
      box-sizing: border-box;
    }

    .search img {
      position: absolute;
      top: 16px;
      left: 40px;
      width: 30px;
      height: 30px;
    }

    .searchBtn {
      border: none;
      background: rgba(198, 225, 248, 0.8);
      width: 150px;
      height: 60px;
      line-height: 60px;
      border-radius: 50px;
      font-size: 28px;
      color: #fff;
      outline: none;
    }
  }
  // 轮播图
  .bannerBox {
    margin: 20px 30px;
    border-radius: 40px;
    /deep/.vux-img {
      border-radius: 40px;
    }
  }
  /* 学习等级标签 */
  .rankBox {
    background-color: #fff;
    padding: 20px;
    border-bottom: 20px solid #f4f4f4;
    height: 100%;
    .rankTag {
      width: 22%;
      background-color: #f4f4f4;
      font-size: 26px;
      border-radius: 40px;
      padding: 10px;
      box-sizing: border-box;
      text-align: center;
      margin: 10px;
      float: left;
    }
    .rankTag-btn img {
      width: 30px;
      height: 30px;
    }
  }
  /deep/.vux-swiper {
    overflow-y: auto;
  }
  /* 课程列表 */

  .couListBox {
    background-color: #fff;
    margin-top: 20px;
    padding: 0 26px;
    .couList-nav {
      font: bold 30px '微软雅黑';
      padding: 20px 0;
    }

    .listBox {
      display: flex;
      align-items: flex-start;
      padding: 10px 0;
    }

    .listBox img {
      width: 300px;
      height: 190px;
      flex-shrink: 0;
    }

    .listRightBox {
      height: 190px;
      box-sizing: border-box;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .listRight-top {
      font-size: 30px;
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .listRight-center {
      color: #b3b3b3;
      font-size: 26px;
      display: flex;
      flex-grow: 1;
    }

    .listRight-down {
      font: bold 35px '微软雅黑';
      color: #f36b55;
    }

    .listRight-down .text1 {
      text-decoration: line-through;
      font: 400 22px '微软雅黑';
      color: #b3b3b3;
    }

    .listRight-down .text2 {
      font: 400 26px '微软雅黑';
      color: #b48a59;
      margin-left: 20px;
    }
  }
}
</style>